<template>
  <view class="container">
    <view class="header">
      <image src="https://web-tiliasljq.oss-cn-hangzhou.aliyuncs.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%A4%B4%E5%83%8F.jpg" 
	class="im" mode="widthFix"></image>
    </view>
    <view class="content">
      <!-- <view class="list-section"> -->
      <!--  <view class="list-item" @click="login">
          <text class="item-title" >登录</text>
        </view> -->
		<view class="list-item" @click="farmerLogin">
		  <text class="item-title">登录</text>
		</view>
        <view class="list-item" @click="register">
          <text class="item-title" >注册</text>
        </view>
        
		
      <!-- </view> -->
    </view>
  </view>
</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'

  export default {
    name: "my-login",
    data() {
      return {

      };
    },
    computed: {
      // 调用 mapState 辅助方法，把 m_user 模块中的数据映射到当前用组件中使用
      ...mapState('m_user', ['redirectInfo']),
    },
    methods: {
      // 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),

      // 获取微信用户的基本信息
      login() {
        uni.getUserProfile({
          desc: "获取你的昵称、头像、地区及性别",
          success: (res) => {
            res.userInfo.status=0
            this.updateUserInfo(res.userInfo)
            // 获取登录成功后的 Token 字符串
            this.getToken(res.userInfo)
          },
          fail() {
            return uni.$showMsg('您取消了登录授权！')
          }
        })
        
      },
      register(){
        uni.navigateTo({
          url: '/subpkg/register/register'
        })
      },
      farmerLogin(){
        uni.navigateTo({
          url: '/subpkg/farmer_login/farmer_login'
        })
      },
      // 调用登录接口，换取永久的 token
      async getToken(info) {
        // 调用微信登录接口
        const [err, res] = await uni.login().catch(err => err) // 判断是否 wx.login() 调用失败

        if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')
        // 准备参数对象
        const query = {
          code: res.code,
          avatar:info.avatarUrl,
          username: info.nickName
        }
        console.log(query)

        // 换取 token
        const {
          data: loginResult
        } = await
        uni.$http.post('/user/login', query)
        
        uni.$showMsg('登录成功')
        //存储token
        this.updateToken(loginResult.data.token)
        // 如果不为 null，则登录成功之后，需要重新导航到对应的页面
        this.navigateBack()
      },
      // 返回登录之前的页面
      navigateBack() {
        // redirectInfo 不为 null，并且导航方式为 switchTab
        if (this.redirectInfo && this.redirectInfo.openType === 'switchTab') {
          // 调用小程序提供的 uni.switchTab() API 进行页面的导航
          uni.switchTab({
            // 要导航到的页面地址
            url: this.redirectInfo.from,
            // 导航成功之后，把 vuex 中的 redirectInfo 对象重置为 null
            complete: () => {
              this.updateRedirectInfo(null)
            }
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  /* 页面的CSS样式 */
  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .header {

    color: white;
    text-align: center;
    .im {
      margin-top: 100rpx;
      width: 50%;
      height: 50%;
      border-radius: 50%;
      
    }

  }

  .header-title {
    font-size: 24px;
    /* 根据实际情况调整 */
    font-weight: bold;
  }

  .content {
    flex: 1;
    background-color: #F5F5F5;
    /* 灰色背景 */
  }

  .list-section {
    margin: 50rpx;
    
    /* 负边距以覆盖圆角 */
    background-color: white;
    border-top-left-radius: 20px;
    /* 左上圆角 */
    border-top-right-radius: 20px;
    /* 右上圆角 */
    border-bottom-left-radius: 20px;
    /* 左上圆角 */
    border-bottom-right-radius: 20px;
    overflow: hidden;
    /* 隐藏溢出的子元素 */
  }

  .list-item {
	  margin: 50rpx;
	  
	  /* 负边距以覆盖圆角 */
	  background-color: white;
	  border-top-left-radius: 20px;
	  /* 左上圆角 */
	  border-top-right-radius: 20px;
	  /* 右上圆角 */
	  border-bottom-left-radius: 20px;
	  /* 左上圆角 */
	  border-bottom-right-radius: 20px;
	  overflow: hidden;
	  /* 隐藏溢出的子元素 */
	background-color: #fbd269;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    /* 内边距 */
    border-bottom: 1px solid #e0e0e0;
    /* 分隔线样式 */
  }

  .item-title {
	text-align: center;
    font-size: 24px;
    /* 字体大小 */
  }

  
</style>